<style type="text/css">
#resultArea {
	border:dotted 1px black;
	width:400px;
	height:*;
}

.wrong {
	cursor:hand;
	background-color:#FFCCFF;
}

.selectList {
	position:absolute;
	background-color:#FFFFFF;
	border:solid 2px black;
	list-style-type:none;
	padding:2px;
}

.off{
	display:none;
}

.clickable{
	cursor:hand;
}

.clickable:hover{
	background-color:#DDDDDD;
}



</style>

<script type="text/javascript">
	var currentSpanIndex = 0;
	
	function check(){
		submitPost(document.stdNameCheckerForm, checkCallback);	
	}
	
	function checkCallback(data){
		$("#resultArea").html("");
		
		
		$(data.output).each(function(index) {
			var spanElement = $(document.createElement("span"));
			spanElement.attr("id","token_"+index);
			spanElement.append(this.token);
			
			if(this.wrongStandard){
				spanElement.addClass("wrong");
				//추천리스트 div
				var ulElement = $(document.createElement("ul"));
				ulElement.attr("id","token_"+index+"_list");
				ulElement.addClass("selectList");
				ulElement.addClass("off");
				if(this.recommendList.length == 0){
					ulElement.addClass("no_result")
					ulElement.append("<li>No results</li>");
				}else{
					$(this.recommendList).each(function(){
						ulElement.append("<li>"+this+"</li>");
					});
				}
				$("#resultArea").append(ulElement);
			}
			
			$("#resultArea").append(spanElement[0].outerHTML + this.endChar.replace("\r\n", "<br>"));
			
		});
		
		$(".wrong").click(function(){
			var wrongList = $(this).parent().find(".wrong");
			wrongList.removeClass("clicked");
			$(this).addClass("clicked");
			
			wrongList.each(function(index){
				if($(this).hasClass("clicked")){
					currentSpanIndex = index;
					return;
				}
			});
			
			$(document).find("ul").each(function(){
				if(!$(this).hasClass("off")){
					$(this).addClass("off");
				}
			});
			var topOffset = $(this).offset().top;
			var leftOffset = $(this).offset().left;
			var innerList = $("#"+this.id+"_list");
			innerList.removeClass("off").offset({top:topOffset+15,left:leftOffset+20});
			//no_result의 경우 클릭못함
			if(innerList.hasClass("no_result")){
				
				innerList.find("li").unbind("click");
				innerList.find("li").addClass("clickable").click(function(){
					$(this).parent().addClass("off");
					if(wrongList.length == currentSpanIndex+1){
						wrongList.eq(0).click();
					}else{
						wrongList.eq(currentSpanIndex+1).click();
					}
				});
				
				return;
			}
			//리스트 클릭 이벤트
			innerList.find("li").unbind("click");
			innerList.find("li").addClass("clickable").click(function(){
				$("#"+$(this).parent().attr("id").replace("_list","")).text($(this).text());
				$(this).parent().addClass("off");
				if(wrongList.length == currentSpanIndex+1){
					wrongList.eq(0).click();
				}else{
					wrongList.eq(currentSpanIndex+1).click();
				}
			});
			
		});
				
	}
	


</script>
<div>
<h1>${title}</h1>
<form name="stdNameCheckerForm" action="standardNameChecker">
<div id="leftDiv">
	<table>
		<tr>
			<td>Text</td>
			<td><textarea id="input" name="input" style="width:400px;height:200px;"></textarea></td>
		</tr>
	</table>
	
</div>
<div id="buttons">
	<input type="button" value="Check" onclick="javascript:check();" >
</div>
<div id="rightDiv">
	<table>
		<tr>
			<td></td>
			<td>
				<p id="resultArea">
					No results at this time.
				</p>	
			</td>
		</tr>
	</table>
</div>

</form>
</div>
